// import 'package:flutter/foundation.dart';
// import 'package:flutter/material.dart';
// import 'package:music_app/api/mock_api.dart';
// import 'package:music_app/widget/my_cached_network_image.dart';

// class MyView extends StatefulWidget {
//   const MyView({super.key});

//   @override
//   State<MyView> createState() => _MyViewState();
// }

// class _MyViewState extends State<MyView> {
//   // final ScrollController _scrollController = ScrollController();
//   final double _headerHeight = 250;
//   // bool _showTitle = false;
//   Map<String, dynamic> _info = {'account': {}, 'profile': {}};

//   @override
//   void initState() {
//     super.initState();
//     WidgetsBinding.instance.addPostFrameCallback((_) {
//       // _scrollController.addListener(_onScroll);
//       getData();
//     });
//   }

//   Future<void> getData() async {
//     try {
//       final response = await MockApi.fetchUser();
//       final Map<String, dynamic> info = {
//         'account': response['data']['account'],
//         'profile': response['data']['profile'],
//       };
//       if (kDebugMode) {
//         // print(info);
//       }
//       setState(() {
//         _info = info;
//       });
//     } catch (e) {
//       setState(() {
//         _info = {};
//       });
//     } finally {}
//   }

//   // void _onScroll() {
//   //   if (_scrollController.offset > _headerHeight - kToolbarHeight) {
//   //     if (!_showTitle) setState(() => _showTitle = true);
//   //   } else {
//   //     if (_showTitle) setState(() => _showTitle = false);
//   //   }
//   // }

//   // @override
//   // void dispose() {
//   //   _scrollController.dispose();
//   //   super.dispose();
//   // }

//   Widget _buildHeader() {
//     return Column(
//       children: [
//         Padding(
//           padding: const EdgeInsets.only(top: 50, left: 16, right: 16),
//           child: Row(
//             crossAxisAlignment: CrossAxisAlignment.start,
//             children: [
//               ClipRRect(
//                 borderRadius: BorderRadius.circular(50),
//                 child: MyCachedNetworkImage(
//                   imageUrl: _info['profile']['avatarUrl'],
//                   width: 60,
//                   height: 60,
//                   x: 480,
//                   y: 480,
//                 ),
//               ),
//               const SizedBox(width: 12),
//               Expanded(
//                 child: Column(
//                   crossAxisAlignment: CrossAxisAlignment.start,
//                   children: [
//                     Text(
//                       _info['profile']['nickname'],
//                       maxLines: 1,
//                       overflow: TextOverflow.ellipsis,
//                       style: const TextStyle(
//                         fontSize: 16,
//                         fontWeight: FontWeight.bold,
//                         color: Colors.white,
//                       ),
//                     ),
//                     const SizedBox(height: 8),
//                     const SizedBox(height: 6),
//                     const SizedBox(height: 6),
//                   ],
//                 ),
//               ),
//             ],
//           ),
//         ),
//       ],
//     );
//   }

//   // Widget _buildPlayAll(bool showRadius) {
//   //   final radius = showRadius
//   //       ? const BorderRadius.only(
//   //           topLeft: Radius.circular(10),
//   //           topRight: Radius.circular(10),
//   //         )
//   //       : BorderRadius.zero;
//   //   return SizedBox(
//   //     height: 56,
//   //     child: DecoratedBox(
//   //       decoration: const BoxDecoration(color: Colors.black),
//   //       child: ClipRRect(
//   //         borderRadius: radius,
//   //         child: Container(
//   //           height: 56,
//   //           decoration: const BoxDecoration(
//   //             color: Colors.white,
//   //           ),
//   //           child: Row(
//   //             children: [
//   //               IconButton(
//   //                 onPressed: () {},
//   //                 icon: const Icon(
//   //                   Icons.play_circle_fill,
//   //                   color: Color(0xFFf43f3b),
//   //                   size: 24,
//   //                 ),
//   //               ),
//   //               const SizedBox(width: 8),
//   //               const Text(
//   //                 '播放全部',
//   //                 style: TextStyle(
//   //                   fontSize: 14,
//   //                   color: Colors.black,
//   //                   fontWeight: FontWeight.bold,
//   //                 ),
//   //               ),
//   //               const Spacer(),
//   //               IconButton(
//   //                 onPressed: () {},
//   //                 icon: const Icon(
//   //                   Icons.add,
//   //                   size: 24,
//   //                   color: Colors.black,
//   //                 ),
//   //               )
//   //             ],
//   //           ),
//   //         ),
//   //       ),
//   //     ),
//   //   );
//   // }

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       body: _info['account'] == null
//           ? const Center(child: CircularProgressIndicator())
//           : NestedScrollView(
//               // controller: _scrollController,
//               headerSliverBuilder: (context, innerBoxIsScrolled) => [
//                 SliverAppBar(
//                   // 拉伸效果
//                   // stretch: true,
//                   pinned: true, // 滑动时固定在顶部
//                   expandedHeight: _headerHeight, // 展开高度
//                   // flexibleSpace: FlexibleSpaceBar(
//                   //   title: _showTitle
//                   //       ? SizedBox(
//                   //           child: Row(
//                   //             children: [
//                   //               ClipRRect(
//                   //                 borderRadius: BorderRadius.circular(50),
//                   //                 child: MyCachedNetworkImage(
//                   //                   imageUrl: _info['profile']['avatarUrl'],
//                   //                   width: 24,
//                   //                   height: 24,
//                   //                   x: 96,
//                   //                   y: 96,
//                   //                 ),
//                   //               ),
//                   //               Text(
//                   //                 _info['profile']['nickname'],
//                   //                 maxLines: 1,
//                   //                 overflow: TextOverflow.ellipsis,
//                   //                 style: const TextStyle(
//                   //                   fontSize: 16,
//                   //                   fontWeight: FontWeight.bold,
//                   //                 ),
//                   //               ),
//                   //             ],
//                   //           ),
//                   //         )
//                   //       : null,
//                   //   background: Stack(
//                   //     fit: StackFit.expand,
//                   //     children: [
//                   //       MyCachedNetworkImage(
//                   //         imageUrl: _info['profile']['backgroundUrl'],
//                   //         width: 60,
//                   //         height: 60,
//                   //         x: 480,
//                   //         y: 480,
//                   //       ),
//                   //       Container(
//                   //         decoration: const BoxDecoration(
//                   //           gradient: LinearGradient(
//                   //             begin: Alignment.topCenter,
//                   //             end: Alignment.bottomCenter,
//                   //             colors: [
//                   //               Colors.black54,
//                   //               Colors.transparent,
//                   //             ],
//                   //           ),
//                   //         ),
//                   //       ),
//                   //       Positioned(
//                   //         top: 100,
//                   //         left: 100,
//                   //         child: _buildHeader(),
//                   //       ),
//                   //       const Text(
//                   //         '测试',
//                   //         style: TextStyle(
//                   //           color: Colors.red,
//                   //         ),
//                   //       )
//                   //     ],
//                   //   ),
//                   // ),
//                   flexibleSpace: FlexibleSpaceBar(
//                     background: LayoutBuilder(
//                       builder: (context, constraints) {
//                         return Stack(
//                           fit: StackFit.expand,
//                           children: [
//                             /// 背景图
//                             MyCachedNetworkImage(
//                               imageUrl: _info['profile']['backgroundUrl'],
//                               width: 60,
//                               height: 60,
//                               x: 480,
//                               y: 480,
//                             ),

//                             /// 遮罩
//                             Container(
//                               decoration: const BoxDecoration(
//                                 gradient: LinearGradient(
//                                   begin: Alignment.topCenter,
//                                   end: Alignment.bottomCenter,
//                                   colors: [Colors.black54, Colors.transparent],
//                                 ),
//                               ),
//                             ),

//                             /// 使用 Positioned 放置组件
//                             Positioned(
//                               top: constraints.maxHeight / 2, // 或其他动态方式
//                               left: 16,
//                               child: _buildHeader(),
//                             ),

//                             /// 示例文字
//                             const Positioned(
//                               top: 16,
//                               right: 16,
//                               child: Text(
//                                 '测试',
//                                 style: TextStyle(color: Colors.red),
//                               ),
//                             ),
//                           ],
//                         );
//                       },
//                     ),
//                   ),
//                   title: SizedBox(
//                     child: Row(
//                       children: [
//                         ClipRRect(
//                           borderRadius: BorderRadius.circular(50),
//                           child: MyCachedNetworkImage(
//                             imageUrl: _info['profile']['avatarUrl'],
//                             width: 24,
//                             height: 24,
//                             x: 96,
//                             y: 96,
//                           ),
//                         ),
//                         Text(
//                           _info['profile']['nickname'],
//                           maxLines: 1,
//                           overflow: TextOverflow.ellipsis,
//                           style: const TextStyle(
//                             fontSize: 16,
//                             fontWeight: FontWeight.bold,
//                           ),
//                         ),
//                       ],
//                     ),
//                   ),
//                   leading: IconButton(
//                     icon: const Icon(Icons.menu),
//                     onPressed: () {},
//                   ),
//                   actions: [
//                     IconButton(
//                       onPressed: () {},
//                       icon: const Icon(Icons.search),
//                     ),
//                     IconButton(
//                       onPressed: () {},
//                       icon: const Icon(Icons.more_vert),
//                     ),
//                   ],
//                 ),
//                 // SliverPersistentHeader(
//                 //   pinned: true,
//                 //   delegate: SliverPlayAllDelegate(
//                 //     height: 56,
//                 //     showRadius: !_showTitle, // 吸顶时去掉圆角
//                 //     builder: (showRadius) => _buildPlayAll(showRadius),
//                 //   ),
//                 // ),
//               ],
//               body: Container(
//                 color: const Color(0xFFF9F9F9),
//                 child: const Center(
//                   child: Text('CES'),
//                 ),
//               ),
//             ),
//     );
//   }
// }

import 'package:flutter/material.dart';

class MyView extends StatefulWidget {
  const MyView({super.key});

  @override
  State<MyView> createState() => _MyViewState();
}

class _MyViewState extends State<MyView> {
  // 歌单分组状态
  bool _createdPlaylistsExpanded = true;
  bool _favoritePlaylistsExpanded = true;

  // 模拟数据
  final List<Map<String, dynamic>> _myMusicServices = [
    {'icon': Icons.library_music, 'title': '本地音乐', 'count': 128},
    {'icon': Icons.cloud_download, 'title': '下载管理', 'count': 0},
    {'icon': Icons.history, 'title': '最近播放', 'count': 56},
    {'icon': Icons.radio, 'title': '我的播客', 'count': 12},
  ];

  final List<Map<String, dynamic>> _functionGridItems = [
    {'icon': Icons.email, 'title': '我的消息'},
    {'icon': Icons.shopping_cart, 'title': '云贝商城'},
    {'icon': Icons.star, 'title': '会员中心'},
    {'icon': Icons.shopping_bag, 'title': '创作者中心'},
    {'icon': Icons.settings, 'title': '设置'},
    {'icon': Icons.nightlight_round, 'title': '夜间模式'},
    {'icon': Icons.schedule, 'title': '定时关闭'},
    {'icon': Icons.palette, 'title': '个性装扮'},
  ];

  final List<String> _createdPlaylists = [
    '我喜欢的音乐',
    '私人雷达',
    '跑步必备 | 超燃节奏',
    '学习工作 | 轻音乐',
    '2023年度歌单'
  ];

  final List<String> _favoritePlaylists = [
    '华语流行 | 热门新歌',
    '欧美电子 | 抖腿必备',
    '日语治愈 | 午后时光',
    'K-POP | 最新热榜'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // 1. 顶部AppBar
          SliverAppBar(
            expandedHeight: 200.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: _buildUserInfoHeader(),
              title: Text('我的', style: TextStyle(color: Colors.white)),
              collapseMode: CollapseMode.pin,
            ),
            actions: [
              IconButton(icon: Icon(Icons.settings), onPressed: () {}),
            ],
          ),

          // 2. 用户信息卡片
          SliverToBoxAdapter(
            child: _buildUserCard(),
          ),

          // 3. 功能入口网格
          SliverPadding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 0.8,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) => _buildGridItem(_functionGridItems[index]),
                childCount: _functionGridItems.length,
              ),
            ),
          ),

          // 4. 我的音乐服务标题
          SliverPadding(
            padding: EdgeInsets.only(left: 16, top: 20, bottom: 8),
            sliver: SliverToBoxAdapter(
              child: Text('我的音乐服务',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            ),
          ),

          // 5. 我的音乐服务列表
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) =>
                  _buildMusicServiceItem(_myMusicServices[index]),
              childCount: _myMusicServices.length,
            ),
          ),

          // 6. 创建的歌单标题（可折叠）
          SliverToBoxAdapter(
            child: _buildPlaylistHeader(
              title: '创建的歌单',
              count: _createdPlaylists.length,
              expanded: _createdPlaylistsExpanded,
              onTap: () => setState(
                  () => _createdPlaylistsExpanded = !_createdPlaylistsExpanded),
            ),
          ),

          // 7. 创建的歌单列表
          if (_createdPlaylistsExpanded)
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) =>
                    _buildPlaylistItem(_createdPlaylists[index], index == 0),
                childCount: _createdPlaylists.length,
              ),
            ),

          // 8. 收藏的歌单标题（可折叠）
          SliverToBoxAdapter(
            child: _buildPlaylistHeader(
              title: '收藏的歌单',
              count: _favoritePlaylists.length,
              expanded: _favoritePlaylistsExpanded,
              onTap: () => setState(() =>
                  _favoritePlaylistsExpanded = !_favoritePlaylistsExpanded),
            ),
          ),

          // 9. 收藏的歌单列表
          if (_favoritePlaylistsExpanded)
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) =>
                    _buildPlaylistItem(_favoritePlaylists[index], false),
                childCount: _favoritePlaylists.length,
              ),
            ),

          // 底部留白
          SliverToBoxAdapter(child: SizedBox(height: 30)),
        ],
      ),
    );
  }

  // 顶部用户信息区域
  Widget _buildUserInfoHeader() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.red[700]!, Colors.red[400]!],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          CircleAvatar(
            radius: 40,
            backgroundImage: NetworkImage('https://picsum.photos/200'),
          ),
          SizedBox(height: 10),
          Text('网易云音乐用户', style: TextStyle(color: Colors.white, fontSize: 16)),
          SizedBox(height: 5),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.red[800],
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text('Lv.8',
                    style: TextStyle(color: Colors.yellow, fontSize: 12)),
              ),
              SizedBox(width: 8),
              Icon(Icons.edit, color: Colors.white, size: 16),
              Text('编辑资料', style: TextStyle(color: Colors.white, fontSize: 12)),
            ],
          ),
          SizedBox(height: 20),
        ],
      ),
    );
  }

  // 用户信息卡片
  Widget _buildUserCard() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(color: Colors.black12, blurRadius: 6, offset: Offset(0, 2))
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildStatItem('0', '动态'),
          _buildStatItem('3', '关注'),
          _buildStatItem('10', '粉丝'),
          _buildStatItem('Lv.8', '等级'),
        ],
      ),
    );
  }

  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(value,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 4),
        Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
      ],
    );
  }

  // 功能网格项
  Widget _buildGridItem(Map<String, dynamic> item) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.red[50],
            shape: BoxShape.circle,
          ),
          child: Icon(item['icon'], color: Colors.red),
        ),
        SizedBox(height: 8),
        Text(item['title'],
            style: TextStyle(fontSize: 12), textAlign: TextAlign.center),
      ],
    );
  }

  // 我的音乐服务项
  Widget _buildMusicServiceItem(Map<String, dynamic> item) {
    return ListTile(
      leading: Container(
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: Colors.red[100],
          borderRadius: BorderRadius.circular(8),
        ),
        child: Icon(item['icon'], color: Colors.red),
      ),
      title: Text(item['title']),
      trailing: item['count'] > 0
          ? Text('${item['count']}', style: TextStyle(color: Colors.grey))
          : null,
      onTap: () {},
    );
  }

  // 歌单分组标题
  Widget _buildPlaylistHeader({
    required String title,
    required int count,
    required bool expanded,
    required VoidCallback onTap,
  }) {
    return ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 16),
      leading: Icon(Icons.arrow_drop_down, color: Colors.grey),
      title: Row(
        children: [
          Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
          SizedBox(width: 8),
          Text('($count)', style: TextStyle(color: Colors.grey)),
        ],
      ),
      trailing: Icon(
        expanded ? Icons.expand_less : Icons.expand_more,
        color: Colors.grey,
      ),
      onTap: onTap,
    );
  }

  // 歌单项
  Widget _buildPlaylistItem(String title, bool isFavorite) {
    return ListTile(
      leading: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
          color: isFavorite ? Colors.red[100] : Colors.grey[300],
          image: isFavorite
              ? DecorationImage(
                  image: NetworkImage('https://picsum.photos/50'),
                  fit: BoxFit.cover)
              : null,
        ),
        child:
            isFavorite ? null : Icon(Icons.music_note, color: Colors.grey[600]),
      ),
      title: Text(title),
      subtitle: isFavorite ? Text('126首, by 我') : null,
      trailing: Icon(Icons.more_vert, color: Colors.grey),
      onTap: () {},
    );
  }
}
